<template>
  <div>
    <c-title :hide="false" text="添加核销员"></c-title>
    <div class="verifier-main">
      <van-cell-group>
        <van-field label="核销员" v-model="form.uid" placeholder="请输入核销员ID" :border="false" input-align="right" required type="number" @blur="modelInput" @input="searchTransfer" />
        <div class="nick-name" :class="nickname ? '' : 'error'" v-if="showSearch">{{ nickname ? "会员：" + nickname : "未找到会员" }}</div>
        <van-field label="姓名" v-model="form.name" placeholder="请输入核销员姓名" :border="false" input-align="right" @blur="modelInput" />
        <van-field label="手机号" v-model="form.mobile" placeholder="请输入核销员手机号" :border="false" input-align="right" @blur="modelInput" />
        <div class="flex-j-sb flex-a-c verifier-status">
          <div class="title">状态</div>
          <div>
            <van-switch v-model="checked" @change="verifierChange" size="0.75rem" active-color="#FF3A00" />
          </div>
        </div>
        <div class="flex-j-sb flex-a-c verifier-status">
          <div class="title">查看数据权限</div>
          <div>
            <van-switch v-model="powerChecked" @change="powerChange" size="0.75rem" active-color="#FF3A00" />
          </div>
        </div>
      </van-cell-group>
    </div>

    <div class="verifier-footer flex-a-c flex-j-c">
      <div class="verifier-btn" @click="verifierBtn">提交</div>
    </div>
  </div>
</template>
<script>
import verifier_controller from "./verifier_controller.js";
export default verifier_controller;
</script>
<style lang="scss" scoped>
.verifier-main {
  margin: 0.5938rem 0.625rem 0 0.625rem;
  background-color: #fff;

  .verifier-status {
    padding: 0.3125rem 0.8438rem 0.9375rem 0.8125rem;
  }
}

.verifier-status .title {
  font-size: 0.9375rem;
  color: #282828;
}

.verifier-footer {
  // width: 100%;
  width: 23.4375rem;
  height: 3.125rem;
  position: fixed;
  bottom: 0;
  background-color: #fff;

  .verifier-btn {
    width: 21.875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
    font-size: 0.9375rem;
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    border-radius: 0.3125rem;
    cursor: pointer;
  }
}

.nick-name {
  padding-left: 1rem;
  color: #666;
  font-size: 0.8125rem;
  text-align: left;
}

.error {
  color: #ff3a00;
}
</style>
